<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包-防抖(Debouncing)</title>
</head>
<body>
    <div>
        <h3>什么是防抖？</h3>
        <h5>假设还差 0.01 秒就到达指定时间，这时又来了一个事件，那么之前的等待作废，需要重新再等待指定时间。</h5>
        <p>例如：限制【鼠标连击】触发、滚动防抖</p>

        <img src="./imgs/02_imglayzyload/1.jpeg" alt="">
        <img src="./imgs/02_imglayzyload/2.jpeg" alt="">
        <img src="./imgs/02_imglayzyload/3.jpeg" alt="">
        <img src="./imgs/02_imglayzyload/4.jpeg" alt="">
        <img src="./imgs/02_imglayzyload/5.jpeg" alt="">
        <img src="./imgs/02_imglayzyload/6.jpeg" alt="">
        <img src="./imgs/02_imglayzyload/7.jpeg" alt="">
        <img src="./imgs/02_imglayzyload/8.jpeg" alt="">
    </div>
    <script>
        function debouncingFunc(fn, waitTime) {
            let timer
            return function () {
                if (waitTime == 0) {
                    fn.apply(this, arguments)
                } else {
                    if (timer) clearTimeout(timer)
                    timer = setTimeout(() => {
                        fn.apply(this, arguments)
                    }, waitTime);
                }
            }
        }

        function actionFunc(){
            console.log("Action");
        }

        // 没采用防抖动
        window.addEventListener('scroll',actionFunc);

        // 采用了防抖动
        window.addEventListener('scroll',debouncingFunc(actionFunc,500));

    </script>
</body>
</html>